	page {
		padding: 0;
		font-size: 28upx;
		height: 100%;
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	}
	@fontGray: rgba(179, 179, 179, 1);
	@backGray: #f3f4f6;
	@baseUpx: 16upx;
	@baseUpx_font: 2upx;
	@formRed: #ff5678;
	.relative{
		position: relative;
	}
	//flex
	.flex {
		display: flex;
	}
	.flex-nowrap {
		flex-wrap: nowrap;
	}
	.flex-wrap {
		flex-wrap: wrap;
	}
	.flex-center {
		justify-content: center;
	}
	.flex-between {
		justify-content: space-between;
	}
	.flex-end {
		justify-content: flex-end;
	}
	.flex-start {
		justify-content: flex-start;
	}
	.flex-around {
		justify-content: space-around;
	}
	.flex-evenly {
		justify-content: space-evenly;
	}
	.align-center {
		align-items: center;
	}
	.flex-col {
		flex-direction: column;
	}
	.maxHeight {
		height: 100%;
	}
	.maxWidth {
		width: 100%;
	}
	.content {
		display: flex;
		flex-direction: column;
		background: #f3f4f6;
		width: 100%;
		// min-height: 100vh;
		z-index: 0;
	}
	.borderBox {
		box-sizing: border-box;
	}
	.flex-1 {
		flex: 1
	}
	//font
	.font-10 {
		font-size: 10 * @baseUpx_font;
	}
	.font-12 {
		font-size: 12 * @baseUpx_font;
	}
	.font-14 {
		font-size: 14 * @baseUpx_font;
	}
	.font-16 {
		font-size: 16 * @baseUpx_font;
	}
	.font-18 {
		font-size: 18 * @baseUpx_font;
	}
	.font-20 {
		font-size: 20 * @baseUpx_font;
	}
	.font-white {
		color: white;
	}
	.font-gray {
		color: @fontGray
	}
	.font-red {
		color: @formRed
	}
	.bolder {
		font-weight: bolder;
	}
	.pre {
		white-space: pre;
	}
	.pre-warp {
		white-space: pre-wrap;
	}
	.ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.text-center {
		text-align: center;
	}
	.text-right {
		text-align: right;
	}
	.text-left {
		text-align: left;
	}
	.m-t {
		margin-top: @baseUpx;
	}
	.m-t-xs {
		margin-top: @baseUpx/2;
	}
	.m-t-l {
		margin-top: @baseUpx/2 * 3;
	}
	.m-t-ll {
		margin-top: @baseUpx/2 * 4;
	}
	.m-b {
		margin-bottom: @baseUpx;
	}
	.m-b-xs {
		margin-bottom: @baseUpx/2;
	}
	.m-b-l {
		margin-bottom: @baseUpx/2 * 3;
	}
	.m-b-ll {
		margin-bottom: @baseUpx/2 * 4;
	}
	.m-l {
		margin-left: @baseUpx;
	}
	.m-l-xs {
		margin-left: @baseUpx/2;
	}
	.m-l-l {
		margin-left: @baseUpx/2 * 3;
	}
	.m-l-ll {
		margin-left: @baseUpx/2 * 4;
	}
	.m-r {
		margin-right: @baseUpx;
	}
	.m-r-xs {
		margin-right: @baseUpx/2;
	}
	.m-r-l {
		margin-right: @baseUpx/2 * 3;
	}
	.m-r-ll {
		margin-right: @baseUpx/2 * 4;
	}
	.m-a {
		margin: @baseUpx;
	}
	.m-a-xs {
		margin: @baseUpx/2;
	}
	.m-a-l {
		margin: @baseUpx/2 * 3;
	}
	.m-a-ll {
		margin: @baseUpx/2 * 4;
	}
	.p-t {
		padding-top: @baseUpx;
	}
	.p-t-xs {
		padding-top: @baseUpx/2;
	}
	.p-t-l {
		padding-top: @baseUpx/2 * 3;
	}
	.p-t-ll {
		padding-top: @baseUpx/2 * 4;
	}
	.p-b {
		padding-bottom: @baseUpx;
	}
	.p-b-xs {
		padding-bottom: @baseUpx/2;
	}
	.p-b-l {
		padding-bottom: @baseUpx/2 * 3;
	}
	.p-b-ll {
		padding-bottom: @baseUpx/2 * 4;
	}
	.p-l {
		padding-left: @baseUpx;
	}
	.p-l-xs {
		padding-left: @baseUpx/2;
	}
	.p-l-l {
		padding-left: @baseUpx/2 * 3;
	}
	.p-l-ll {
		padding-left: @baseUpx/2 * 4;
	}
	.p-r {
		padding-right: @baseUpx;
	}
	.p-r-xs {
		padding-right: @baseUpx/2;
	}
	.p-r-l {
		padding-right: @baseUpx/2 * 3;
	}
	.p-r-ll {
		padding-right: @baseUpx/2 * 4;
	}
	.p-a {
		padding: @baseUpx;
	}
	.p-a-xs {
		padding: @baseUpx/2;
	}
	.p-a-l {
		padding: @baseUpx/2 * 3;
	}
	.p-a-ll {
		padding: @baseUpx/2 * 4;
	}
	.p-b-safe {
		padding-bottom: 80px;
	}
	.back-white {
		background: white;
	}
	.back-gray {
		background: @backGray;
	}
	.relative {
		position: relative;
	}
	.b-b {
		border-bottom: 1px solid @fontGray;
	}
	.b-t {
		border-top: 1px solid @fontGray;
	}
	.b-l {
		border-left: 1px solid @fontGray;
	}
	.b-r {
		border-right: 1px solid @fontGray;
	}
	.bt-red {
		background: rgba(255, 86, 120, 1);
	}
	.shadow {
		box-shadow: 0px 4upx 12upx @backGray;
	}
	.vertical-middle {
		vertical-align: middle;
	}